<template>
  <div class="user-list">
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.user_id">
          <td>{{ user.user_id }}</td>
          <td>{{ user.bu }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.enable_time }}</td>
          <td>{{ user.disable_time }}</td>
          <td>{{ user.queued_tasks }}</td>
          <td>{{ user.running_tasks }}</td>
          <td>
            <label class="switch">
              <input 
                type="checkbox" 
                :checked="user.is_enabled" 
                @change="toggleUserStatus(user.user_id, $event.target.checked)"
              >
              <span class="slider round"></span>
            </label>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
      <span>Page {{ currentPage }}</span>
      <button @click="nextPage">Next</button>
    </div>
    <Toast v-if="showToast" :message="toastMessage" @close="showToast = false" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { getUserList } from '../../api/users'
import Toast from '../common/Toast.vue'

export default {
  components: { Toast },
  setup() {
    const users = ref([])
    const currentPage = ref(1)
    const showToast = ref(false)
    const toastMessage = ref('')
    
    const headers = [
      '用户编号', 'BU', 'email', '启用时间', 
      '停用时间', '排队中的任务数量', '进行中的任务数量', '启用'
    ]

    const fetchUsers = async () => {
      try {
        const data = await getUserList(currentPage.value)
        users.value = data.users
      } catch (error) {
        console.error('Failed to fetch users:', error)
      }
    }

    onMounted(fetchUsers)

    const nextPage = () => {
      currentPage.value++
      fetchUsers()
    }

    const prevPage = () => {
      if (currentPage.value > 1) {
        currentPage.value--
        fetchUsers()
      }
    }

    const showToastMessage = (message) => {
      toastMessage.value = message
      showToast.value = true
      setTimeout(() => {
        showToast.value = false
      }, 3000)
    }

    const toggleUserStatus = async (user_id, is_enabled) => {
      try {
        // 这里应该调用API更新用户状态
        // 由于需求中没有明确的后端接口，我们只模拟操作
        showToastMessage(`用户 ${user_id} 已${is_enabled ? '启用' : '停用'}`)
        
        // 更新本地状态
        const user = users.value.find(u => u.user_id === user_id)
        if (user) {
          user.is_enabled = is_enabled ? 1 : 0
          if (is_enabled) {
            user.enable_time = new Date().toLocaleString()
          } else {
            user.disable_time = new Date().toLocaleString()
          }
        }
      } catch (error) {
        console.error('Failed to toggle user status:', error)
      }
    }

    return {
      users,
      headers,
      currentPage,
      showToast,
      toastMessage,
      nextPage,
      prevPage,
      toggleUserStatus
    }
  }
}
</script>

<style scoped>
.user-list {
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

button {
  padding: 5px 10px;
  cursor: pointer;
}

/* Switch styles */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #42b983;
}

input:checked + .slider:before {
  transform: translateX(26px);
}
</style>
